<template>
  <base-layout
  :visibleSea="false">
    <template #contentPanel>
      <el-form
        ref="fromdata"
        :show-message="false"
        :hide-required-asterisk="true"
        :model="fromdata"
        :rules="rules"
        label-width="90px"
        label-position="right"
      >
        <el-row class="">
          <el-col :span="12">供应商信息</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="供应商编号:" prop="supplierCode">
              <el-input clearable v-model="fromdata.supplierCode" placeholder="供应商名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="供应商名称:" prop="supplierName">
              <el-input clearable v-model="fromdata.supplierName" placeholder="供应商名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属门店:" prop="storeId">
              <job-shop v-model="fromdata.storeId" placeholder="所属门店"  class="w-100"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属类别:" prop="partsDictId">
              <el-select
                clearable
                ref="dragSelect"
                v-model="fromdata.supplierType"
                class="w-100"
                disabled
              >
                <el-option
                  v-for="item in dict['供应商类型']"
                  :key="item.id"
                  :value="item.value"
                  :label="item.text"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="所属城市:" prop="cityCode">
              <CitySelect v-model="fromdata.cityCode" class="w-100"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属区县:" prop="type">
              <District
                :cityCode="fromdata.cityCode"
                v-model="fromdata.countyCode"
                class="w-100"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="供应商地址:" prop="address">
              <el-input clearable v-model="fromdata.address" placeholder="供应商地址"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="联系人:" prop="contactName">
              <el-input clearable v-model="fromdata.contactName" placeholder="联系人"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话:" prop="contactPhone">
              <el-input clearable v-model.number="fromdata.contactPhone" placeholder="联系电话"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="主营业务:" prop="note">
              <el-input
                type="textarea"
                placeholder="主营业务"
                :rows="2"
                clearable
                v-model="fromdata.note"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注信息:">
              <el-input
                type="textarea"
                placeholder="备注信息"
                :rows="2"
                clearable
                v-model="fromdata.remark"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">经营信息</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="公司全称:" prop="companyName">
              <el-input clearable v-model="fromdata.companyName" placeholder="公司全称" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="公司法人:" prop="companyJuridical">
              <el-input clearable v-model="fromdata.companyJuridical" placeholder="公司法人" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="统一社会信用代码:" prop="companyCode" label-width="130px">
              <el-input clearable v-model="fromdata.companyCode" placeholder="统一社会信用代码"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="成立日期:" prop="companyFoundingTime">
              <el-date-picker v-model="fromdata.companyFoundingTime" type="date" placeholder="成立日期" class="w-100"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24" align="right">
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </el-col>
        </el-row>
      </el-form>
    </template>
  </base-layout>
</template>
<script>
import {
  details,
  addData,
  updateData
} from '@/api/after-sale/systemManage/supplier'
import baseMixin from '@/mixins/base'
import { parseTimeToYMDHMS, getDict } from '@/utils/index'
export default {
  mixins: [baseMixin({})],
  components: {},
  data() {
    return {
      fromdata: {
        cityCode: '',
        address: '',
        companyCode: '',
        companyFoundingTime: '',
        companyJuridical: '',
        companyName: '',
        contactName: '',
        contactPhone: '',
        countyCode: '',
        note: '',
        supplierType: '配件供应商',
        remark: '',
        status: true,
        storeId: '',
        supplierCode: '',
        supplierName: ''
      },
      rules: {
        supplierCode: [{ required: true, message: '供应商编号不能为空', trigger: 'blur' }],
        supplierName: [{ required: true, message: '供应商不能为空', trigger: 'blur' }]
      },
      dict: []
    }
  },
  async created() {
    const id = this.$route.query && this.$route.query.id
    if (id) {
      const { data } = await details(id)
      if (data) {
        this.fromdata = data
      }
    }
    this.dict = getDict(['供应商类型'])
  },
  methods: {
    onSubmit() {
      this.$refs.fromdata.validate(valid => {
        if (valid) {
          let options = this.fromdata
          options.companyFoundingTime = options.companyFoundingTime ? parseTimeToYMDHMS(options.companyFoundingTime) : ''
          this.saveSuppierData()
        } else {
          return false
        }
      })
    },
    async saveSuppierData() {
      const { success } = this.fromdata.id ? await updateData(this.fromdata) : await addData(this.fromdata)
      if (success) {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.$router.push({ path: '/supplierManage/supplier' })
      } else {
        this.$message.error('操作失败')
      }
    }
  }

}
</script>
